<template>
  <div id="app"> 
    <!-- 头部导航 -->
    <h1>头部导航</h1>  
   <Nav :nav="nav"></Nav>
   <!-- tab切换 -->
   <h1>tab切换</h1> 
    <Tab :tab="tab"></Tab>
  <!-- toast弹框 -->
   <h1 @click="toast.isToast=!toast.isToast">toast弹框</h1> 
    <Toast :toast="toast" v-show="toast.isToast" @childClick="hidrenToast"></Toast>
     <!--背景图片自适应 -->
   <h1>背景图片自适应</h1> 
    <Background></Background>
     <!--轮播图 -->
   <h1>轮播图</h1> 
    <Swiper></Swiper>
      <!--表格布局 -->
   <h1>表格布局</h1> 
   <tab-center></tab-center>
     <!--多列布局 -->
   <h1>多列布局</h1> 
   <more-row></more-row>
  </div>
</template>

<script>
import Nav from '@/components/nav/index';
import Tab from '@/components/tab/index';
import Toast from '@/components/toast/index';
import Background from '@/components/background/index';
import Swiper from '@/components/swiper/index';
import TabCenter from '@/components/tabCenter/index';
import MoreRow from '@/components/moreRow/index';
export default {
  name: 'App',
  data(){
    return {
      nav:{
       title:"小牛科技",
       style:"background:yellow;"
      },
      tab:{
       title:["标题一","标题二","标题三","标题四","标题五","标题六"],
       content:["内容一","内容二","内容三","内容四","内容五","内容六"],
       style:"background:yellow;"
      },
       toast:{
         message:" 1累计方式：了几充值在9699元及以上方可兑换。 2、奖品领取：所兑换奖品在“奖品记录”中均可查看，同时，请务必在“收货地址”中填写真实姓名和联系方式。3、奖品领取：所兑换奖品在“奖品记录”中均可查看，同时，请务必在“收货地址”中填写真实姓名和联系方式。",
         isToast:false
       }
    }
  },
  methods:{
    hidrenToast(value){
     this.toast.isToast = false;
    },
  },
  components:{Nav,Tab,Toast,Background,Swiper,TabCenter,MoreRow}
}
</script>

<style>

</style>
